* {
    padding: 0px;
    margin: 0px;
}
body {
    height: 2000px;
}

ul,ol{
    list-style: none;
    padding: 0;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}



.containers {
    width: 100%;
    min-width: 350px;
    padding-top: 300px;
    height: auto;
    transform: rotateY(0deg);


    .box {
        width: 350px;
        height: 350px;
        margin: 0 auto;   
        transform-style: preserve-3d;
        // perspective: 0px;

        > ol {
            position: relative;
            width: 150px;
            margin: 100px auto;
            transform-style: preserve-3d;
            transform: rotateX(15deg) rotateY(45deg);
            
            animation: aa 6s running infinite linear;

            > li {
                width: 150px;
                height: 150px;
                position: absolute;
                background: yellow;

                
            }

            .otop {
                transform: translateZ(75px);
            }
            .obottom {
                transform: translateZ(-75px);
            }
            .oleft {
                transform: translateX(75px)  rotateY(90deg);
            }
            .oright {
                transform: translateX(-75px) rotateY(-90deg);
            }
            .obefore {
                transform: translateY(-75px) rotateX(90deg);
            }
            .oafter {
                transform: translateY(75px) rotateX(-90deg);
            }
        } 

        > ul {
            width: 350px;
            display: block;
            margin: 0 auto;
            position: relative;
            top: -100px;
            transform-style: preserve-3d;
            transform: rotateX(15deg) rotateY(45deg);
            animation: aa 6s running infinite linear;
           
            perspective: -1000px;


            
            > li {
                width: 350px;
                height: 350px;
                position: absolute;
                opacity: 0.1;
                transition: all 0.5s;

            }
            .top {
                transform: translateZ(175px);
            }
            .bottom {
                transform: translateZ(-175px);
            }
            .left {
                transform: translateX(175px)  rotateY(90deg);
            }
            .right {
                transform: translateX(-175px) rotateY(-90deg);
            }
            .before {
                transform: translateY(-175px) rotateX(90deg);
            }
            .after {
                transform: translateY(175px) rotateX(-90deg);
            }
        }

          
    }

}

@keyframes  aa {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }    
    50% {
        transform: rotateX(15deg) rotateY(360deg);
    } 
    100% {
        transform: rotateX(-15deg) rotateY(720deg);
    }    
}

